<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../assets/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <img src="../assets/img/loading.gif" v-preload=" imgPath" >
        <img src="../assets/img/loading.gif"  v-for="(item,i) in imgPaths" v-preload=" imgPaths[i]">
    </div>
    <script>
            Vue.directive("preload",function(el,bind){
            let img= new Image();
            console.log(img);
            console.log(el);
            console.log(bind);
            img.src=bind.value;
            img.onload=function(){
                el.src=img.src;
            }
        })
        new Vue({
            
            el:"#app",
            data:{
                    imgPath:"https://bbsfiles.vivo.com.cn/vivobbs/attachment/forum/201803/26/123825loa8to82a5rar5qu.jpg",
                    imgPaths:[
                    "https://picsum.photos/id/308/308/210?id=7fskc04oak",
                    "https://picsum.photos/id/201/308/210?id=c1im6qtybx",
                    "https://picsum.photos/id/202/308/210?id=nclw23wmqx",
                    "https://picsum.photos/id/203/308/210?id=s6k74aznzr",
                    "https://picsum.photos/id/204/308/210?id=2wp8y6373c",
                    "https://picsum.photos/id/235/308/210?id=2kdvmygrbc",
                    "https://picsum.photos/id/206/308/210?id=xa817rx3du",
                    "https://picsum.photos/id/236/308/210?id=yy6f3vgx2f",
                    "https://picsum.photos/id/208/308/210?id=hjl52xdy5f",
                    "https://picsum.photos/id/209/308/210?id=rmfucz7625",
                    "https://picsum.photos/id/210/308/210?id=iy74cl00qd",
                    "https://picsum.photos/id/211/308/210?id=rwush0qhlc",
                    "https://picsum.photos/id/212/308/210?id=9i6d51b0w1",
                    "https://picsum.photos/id/213/308/210?id=clqsc57h9x",
                    "https://picsum.photos/id/214/308/210?id=ghbab9i418",
                    "https://picsum.photos/id/215/308/210?id=vzng72e9bo",
                    "https://picsum.photos/id/216/308/210?id=bpdgbed9xv",
                    "https://picsum.photos/id/217/308/210?id=uldqeild9r",
                    "https://picsum.photos/id/218/308/210?id=bol7yh1rvx",
                    "https://picsum.photos/id/219/308/210?id=1jugqebgti",
                    "https://picsum.photos/id/220/308/210?id=lbhi7vbs2e",
                    "https://picsum.photos/id/221/308/210?id=s90oq037hi",
                    "https://picsum.photos/id/221/308/210?id=2qwcpyg93r",
                    "https://picsum.photos/id/222/308/210?id=azljmeapmr",
                    "https://picsum.photos/id/223/308/210?id=0z4q4inulw",
                    "https://picsum.photos/id/240/308/210?id=uh9sbgeg3z",
                    "https://picsum.photos/id/225/308/210?id=ufpk8xilpv",
                    "https://picsum.photos/id/243/308/210?id=92zt1po50s",
                    "https://picsum.photos/id/227/308/210?id=j7bdo1edz9",
                    "https://picsum.photos/id/228/308/210?id=kiudi2y11h"
                ]
            },
            methods: {
                
            },
        })

    </script>
</body>
</html>